<template>
  <div class="foodRoastFish">
    <roast-fish-header/>
    <roast-fish-logo/>
    <roast-fish-recommend :list="roastFishRecommendList "/>
    <roast-fish-footer/>
  </div>
</template>

<script>
import RoastFishHeader from "./components/RoastFishHeader.vue";
import RoastFishLogo from "./components/RoastFishLogo.vue";
import RoastFishRecommend from "./components/RoastFishRecommend.vue";
import RoastFishFooter from "./components/RoastFishFooter.vue";
import axios from "axios";
export default {
  name: "foodRoastFish",
  components: {
    RoastFishHeader,
    RoastFishLogo,
    RoastFishRecommend,
    RoastFishFooter
  },
  data: function() {
    return {
      roastFishRecommendList: []
    };
  },
  mounted() {
    this.getHomeApiInfo();
  },
  methods: {
    getHomeApiInfo() {
      axios
        .get("/mock/Food/roastFish.json")
        .then(this.getHomeResponseInfo, function(success) {
          console.log("请求json数据成功");
          console.log(success);
        })
        .catch(function(err) {
          console.log("请求json数据失败");
          console.log(err);
        });
    },
    getHomeResponseInfo(response) {
      console.log(response.data);
      let res = response.data;
      if (res.success && res.dataList) {
        const roastFishData = res.dataList;
        this.roastFishRecommendList = roastFishData.RoastFishRecommedLists;
      }
    }
  }
};
</script>          